使用vue

2024-07-03 10:40| 来源: 网络整理| 查看: 265

安装、调试、修改效果：安装插件及环境问题：1、安装vue-video-player2、组件使用（全部）调整的地方更新：视频全铺满！

效果：

播放中 poster

安装插件及环境问题： 1、安装vue-video-player npm install vue-video-player -save

使用中遇到的环境问题： 1、Failed to resolve loader: sass-loader You may need to install it 安装sass-loader

cnpm install sass-loader -D cnpm install node-sass -D

如果第一步没有规定适用的版本，有可能会遇到下列错误 2、sass-loader版本过高运行错误TypeError: this.getOptions is not a function 降低sass-loader

// 卸载 npm uninstall --save sass-loade // 安装 npm install -D [email protected]

3、 node-sass版本高

npm uninstall node-sass npm install [email protected] 2、组件使用（全部）

中间包含获取视频相关信息（自行替换），改变播放器尺寸（全铺），微信浏览器默认自动播放设置（注释）

import Vue from "vue"; import { getReplyVideoInfo } from "../assets/wx";//获取视频信息 import VideoPlayer from "vue-video-player"; // require("video.js/dist/video-js.css"); //按官网引会找不到然后报错 require("vue-video-player/node_modules/video.js/dist/video-js.css"); require("vue-video-player/src/custom-theme.css"); Vue.use(VideoPlayer); export default { name: "my_video", props: {}, data() { return { video_id: this.$route.query.video_id || "9503", options: { playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度 autoplay: false, // 是否自动播放 muted: false, // 是否静音 loop: false, // 是否开启循环播放 preload: "auto", // 自动预加载 language: "zh-CN", // 语言，'en', 'zh-cn', 'zh-tw' aspectRatio: "207:448", // 播放器高宽占比（例如"16:9"或"4:3"） // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 sources: [ { type: "video/mp4", // 类型 src: "http://8604.mp4" // url地址 } ], poster: "http://ww3e325.jpgb", // 封面地址 notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: false, // 是否显示当前时间和持续时间的分隔符，"/" durationDisplay: true, // 是否显示持续时间 remainingTimeDisplay: false, // 是否显示剩余时间 fullscreenToggle: true // 是否显示全屏按钮 } } }; }, created() { var vm = this; //页面初始获取高宽比，使播放器铺满窗口（视频还保持元尺寸，所以会出现黑边，这也是个问题），如果不需要铺满去电这个即可。使用fluid: true使用原视频的大小 vm.options.aspectRatio = document.body.clientWidth + ':' + document.body.clientHeight; console.log(vm.options.aspectRatio); getReplyVideoInfo(vm.video_id).then( res => { vm.options.sources[0].src = res.data.url; vm.options.poster = res.data.poster; }, err => { console.log(err); } ); }, // mounted() { // 处理微信浏览器里不能自动播放的操作 // let self = this; // //调用元素提供的方法 play() // this.$refs.videoPlayer.player.play(); // //判斷 WeixinJSBridge 是否存在 // var WeixinJSBridge = WeixinJSBridge; // if ( // typeof WeixinJSBridge == "object" && // typeof WeixinJSBridge.invoke == "function" // ) { // self.$refs.videoPlayer.player.play(); // } else { // //監聽客户端抛出事件"WeixinJSBridgeReady" // if (document.addEventListener) { // document.addEventListener( // "WeixinJSBridgeReady", // function() { // self.$refs.videoPlayer.player.play(); // }, // false // ); // } else if (document.attachEvent) { // document.attachEvent("WeixinJSBridgeReady", function() { // self.$refs.videoPlayer.player.play(); // }); // document.attachEvent("onWeixinJSBridgeReady", function() { // self.$refs.videoPlayer.player.play(); // }); // } // } // }, //computed: { // player() { // return this.$refs.videoPlayer.player; // } //}, methods: { //以下是组件的触发方法 // 播放回调 onPlayerPlay($event) { console.log("player play!", $event); }, // 暂停回调 onPlayerPause($event) { console.log("player pause!", $event); }, // 视频播完回调 onPlayerEnded($event) { console.log($event); }, // DOM元素上的readyState更改导致播放停止 onPlayerWaiting($event) { console.log($event); }, // 已开始播放回调 onPlayerPlaying($event) { console.log($event); }, // 当播放器在当前播放位置下载数据时触发 onPlayerLoadeddata($event) { console.log($event); }, // 当前播放位置发生变化时触发。 onPlayerTimeupdate($event) { console.log($event); }, //媒体的readyState为HAVE_FUTURE_DATA或更高 onPlayerCanplay($event) { console.log("player Canplay!", $event); }, //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。 onPlayerCanplaythrough($event) { console.log("player Canplaythrough!", $event); }, //播放状态改变回调 playerStateChanged($event) { console.log("player current update state", $event); }, //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。 playerReadied() { console.log("example player 1 readied"); }, showApp() { window.location.href = "h64"; } } }; .downTag { position: fixed; left: 0; top: 20px; z-index: 2; } .my_video { width: 100%; height: 100%; margin: 0 auto; text-align: center; } 调整的地方更新：视频全铺满！视频全铺满video播放器：使用 **object-fit: fill;**

object-fit 属性可接受如下值： fill -默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。 contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。 >cover -调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。 none - 不对替换的内容调整大小。 scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

视频poster 全铺满修改css：**background-size: cover;**

background-size: length|percentage|cover|contain;

在原来vue-video-player设置的基础上修改引入的css.深度作用选择器

为什么不能直接修改？原因：style标签添加了 scoped 属性，它的 CSS 只作用于当前组件中的元素，自然权重是小于全局样式的，所以，样式覆盖不了

修改方式：

方法一：去掉style标签的scoped 属性

方法二：使用深度作用选择器/deep/，使用方式：将/deep/ + space空格添加在第三方样式类的前面。

/deep/ .video-js .vjs-tech { object-fit: fill; } /deep/ .vjs-poster { background-size: cover; }

【本文地址】

公司简介

联系我们